<template>
  <div>
    <div class="table"  v-if="select_sceneId <= 0">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 拍卖场次</el-breadcrumb-item>
                <el-breadcrumb-item>拍卖场次审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
            <el-select v-model="select_cate" placeholder="场次状态" class="handle-select mr10" @change="handleSelectionChange">
                <el-option key="-1" label="所有" value=""></el-option>
                <el-option key="1" label="新创建" value="1"></el-option>
                <el-option key="2" label="待审核" value="2"></el-option>
                <el-option key="3" label="下架中" value="4"></el-option>
                <el-option key="4" label="预览中" value="16"></el-option>
                <el-option key="6" label="上架中" value="32"></el-option>
                <el-option key="7" label="已结束" value="64"></el-option>
                <el-option key="8" label="管理员下架" value="8"></el-option>
            </el-select>
            <!-- <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
        </div>
        <el-table :data="data" border style="width: 100%" ref="multipleTable" > <!-- @selection-change="handleSelectionChange" -->
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column label="LOGO" width="150" fixed>
              <template scope="scope">
                <div class="meebidImageContainer">
                  <img :src="scope.row.logo"/>
                </div>
                
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" sortable width="200" fixed>
            </el-table-column>
            <el-table-column prop="description" label="描述" sortable width="250">
            </el-table-column>
            <el-table-column prop="startAt" label="起始" sortable width="180">
              <template slot-scope="scope">
                <span>{{dateFormatter(scope.row.startAt)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endAt" label="结束" width="180">
              <template slot-scope="scope">
                <span>{{dateFormatter(scope.row.endAt)}}</span>
              </template>
            </el-table-column>
            
            <el-table-column prop="state" label="状态" width="100" :formatter="stateFormatter">
            </el-table-column>
            <el-table-column prop="type" label="类型" :formatter="typeFormatter" width="100">
            </el-table-column>
            <el-table-column prop="creatorName" label="创建者" width="120" v-if="select_cate==2">
            </el-table-column>
            <el-table-column prop="lotCount" label="待审核拍品数" width="80"  v-if="select_cate==2">
            </el-table-column>
            <el-table-column prop="updateAt" label="更新" width="180">
              <template slot-scope="scope">
                <span>{{dateFormatter(scope.row.updateAt)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleDetail(scope.$index, scope.row)">详细</el-button>
                    <el-button size="small" type="danger"
                            @click="showLotterys(scope.$index, scope.row)">拍品列表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="20"
                    :total="total">
            </el-pagination>
        </div>
        
        <vodal :show="select_scene.id > 0" v-if="select_scene.id > 0" animation="zoom" @hide="select_scene = {id:0}" :width="1080" :height="800">
            <scene-detail :scene="select_scene" :isAudit="select_cate==2"></scene-detail>
        </vodal>
    </div>
    <div  v-if="select_sceneId > 0">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-button type="info" plain icon="el-icon-arrow-left" @click="select_sceneId=0" round>返 回</el-button>
        </el-col>
      </el-row>

      <!-- <el-row :gutter="20">
        <el-col :span="6">
          <img :src="select_scene.logo" width="100" height="100" />
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">{{select_scene.name}}</div>
        </el-col>
      </el-row> -->

      <el-row :gutter="20">
        <lottery-list :sceneId="select_sceneId" :state="select_cate"></lottery-list>
      </el-row>
    </div>
  </div>
</template>

<script>
import LotteryListCard from "../cards/LotteryListCard";
import SceneDetailCard from "../cards/SceneDetailCard";
import { AuctionSceneState } from "../../config";
import dateUtils from "./../../utils/date";
export default {
  components: {
    "lottery-list": LotteryListCard,
    "scene-detail": SceneDetailCard
  },
  data() {
    return {
      tableData: [],
      cur_page: 1,
      total: 0,
      select_cate: "2",
      select_word: "",
      select_sceneId: 0,
      select_scene: { id: 0 },
      is_search: false
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      const self = this;
      return self.tableData;
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    getData() {
      let self = this;
      self.$http
        .get(
          "api/mgr/scenes?state=" +
            self.select_cate +
            "&offset=" +
            (self.cur_page - 1) * 20 +
            "&count=20"
        )
        .then(res => {
          if (res.data.code != 1) {
            return;
          }
          self.tableData = res.data.content.items;
          self.total = res.data.content.total;
        });
    },
    search() {
      this.is_search = true;
    },
    typeFormatter(row, column) {
      switch (row.type) {
        case 0:
          return "Timed";
        case 1:
          return "Live";
        case 2:
          return "CategoryOnly";
        default:
          break;
      }
      return "未知";
    },
    dateFormatter(date) {
      return date ? dateUtils.format(new Date(date), "MM/dd/yyyy hh:mm A") : "";
    },
    stateFormatter(row, column) {
      switch (row.state) {
        case 0:
          return "已删除";
        case 1:
          return "新创建";
        case 2:
        case 3:
          return "待审核";
        case 4:
          return "已过审";
        case 8:
          return "被管理员下架";
        case 16:
          return "预览中";
        case 18:
          return "预览中&待审核";
        case 32:
          return "上架中";
        case 64:
          return "已结束";
        default:
          break;
      }
      return "未知";
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleDetail(index, row) {
      this.select_scene = this.tableData[index];
    },
    showLotterys(index, row) {
      console.log(index);
      this.select_sceneId = this.tableData[index].id;
    },
    handleSelectionChange() {
      this.getData();
    },
    auditHouse(accepted) {
      // for (var i = 0; i < this.tableData.length; i++) {
      //   if (tableData[i].id == this.select_sceneId) {
      //     this.tableData[i].state = accepted ? 2 : 3;
      //     break;
      //   }
      // }
    }
  }
};
</script>

<style >
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.meebidImageContainer img {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  vertical-align: middle;
}
.meebidImageContainer {
  width: 100px;
  height: 100px;
  border: none;
  position: relative;
  display: inline-block;
  margin: 5px;
  padding: 0;
  vertical-align: top;
  text-decoration: none;
  outline: none;
}
</style>